<template>
  <div style="background-color: rgb(239, 239, 244)">
    <x-header :left-options="{showBack: true,preventGoBack:true}" @on-click-back="goBack" theme=""
              class="queryHeader">清单详情
    </x-header>
    <div style="background-color: white;margin-top: 10px">
      <div class="item-list-title" :class="filter(currentList)">
        <img src="static/image/list/wechat.png" alt="微信" style="width: 14px" v-if="$store.state.app.wxFlag === '1'">
        <img src="static/image/list/pc.png" alt="微信" style="width: 14px" v-if="$store.state.app.wxFlag !== '1'">
        {{currentList.riskNo}}
        <span style="float: right">{{currentList.name}}</span>
      </div>
      <div style="padding: 10px">
        <div class="weui-media-box_appmsg">
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title" style="color:#666;margin-bottom: 10px;font-size: 14px">
              <span>{{currentList.title}}</span>
              <span style="float: right" @click="changeBatchNo" v-if="currentList.batch.length > 1">
                <span>批次{{names[batchNo - 1]}}</span>
                <i class="iconfont icon-packup" v-if="showPopup" style="color:#4A90E2;padding-right: 5px;"></i>
                <i class="iconfont icon-unfold" v-if="!showPopup" style="color:#4A90E2;padding-right: 5px;"></i>
              </span>
              <span style="float: right" v-if="currentList.batch.length === 1">
                <span>批次{{names[batchNo - 1]}}</span>
              </span>
            </h4>
            <span style="font-size: 13px;line-height: 16px;float: right;color:#aaa">{{currentList.date}}</span>
            <p class="weui-media-box__desc" style="color:#666;margin-bottom: 0;font-size: 14px">
              待处理岗：
              {{currentList.state}}
            </p>
          </div>
        </div>
      </div>
    </div>
    <grid class="home_icon" :cols="3" style="background-color: white;margin-top: 10px">
      <grid-item label="业务信息" @on-item-click="onClick({index:0, path: '/caseInfo'})">
        <img class="listIcon" slot="icon" src="static/image/list/1.png">
      </grid-item>
      <grid-item label="客户信息" @on-item-click="onClick({index:1, path: '/customerInfo'})">
        <img class="listIcon" slot="icon" src="static/image/list/2.png">
      </grid-item>
      <grid-item label="人员信息" @on-item-click="onClick({index:2, path: '/personInfo'})">
        <img class="listIcon" slot="icon" src="static/image/list/3.png">
      </grid-item>
      <grid-item label="既往投保" @on-item-click="onClick({index:3, path: '/oldInsurance'})">
        <img class="listIcon" slot="icon" src="static/image/list/4.png">
      </grid-item>
      <grid-item label="保险方案" @on-item-click="onClick({index:4, path: '/insuranceScheme'})">
        <img class="listIcon" slot="icon" src="static/image/list/5.png">
      </grid-item>
      <grid-item label="审核轨迹" @on-item-click="onClick({index:5, path: '/auditTrack'})">
        <img class="listIcon" slot="icon" src="static/image/list/7.png">
      </grid-item>
      <grid-item label="电子计划书" v-if="currentList.passFlag === '2'" @on-item-click="createPdf">
        <img class="listIcon" slot="icon" src="static/image/list/8.png">
      </grid-item>
    </grid>
    <popup v-model="showError" position="top" :show-mask="false">
      <div class="position-vertical-demo">
        {{toastTxt}}
      </div>
    </popup>
    <div v-transfer-dom>
      <popup v-model="showPopup">
        <popup-header
          class="batchPopup"
          title="请选择批次"
          :show-bottom-border="true">
        </popup-header>
        <group gutter="0">
          <radio :options="currentList.batch" :value="batchNo" @on-change="getBatchNo"></radio>
        </group>
      </popup>
    </div>
  </div>
</template>
<script>
  import {XHeader, Grid, GridItem, PopupHeader, Popup, TransferDom, Radio, Group} from 'Vux'
  import Util from 'util'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      Grid,
      GridItem,
      PopupHeader,
      Popup,
      Radio,
      Group
    },
    data(){
      return {
        names: ['一', '二', '三', '四', '五', '六', '七', '八', '九'],
        showPopup: false,
        batchNo: 1,
        currentList: {
          batch: []
        },
        formInfo: {},
        showError: false,
        toastTxt: "计划书不存在"
      }
    },
    //监听弹窗时间
    watch: {
      showError (val) {
        if (val) {
          setTimeout(() => {
            this.showError = false
          }, 1000)
        }
      }
    },
    methods: {
      //提示信息
      vuxToast(info){
        this.showError = true;
        this.toastTxt = info
      },
      //创建PDF
      createPdf(){
        if (this.formInfo.bussinessInfo.isWxFlag === '1') {
          window.open("../api/pdf/getElecPlanBook/" + this.currentList.riskNo)
        } else {
          this.vuxToast('计划书不存在')
        }
      },
      //返回查询页面
      goBack(){
        this.$store.commit('SAVE_MINUTED_INFO', null);
        this.$router.push({path: '/priceQuery'});
        this.$store.commit('CHANGE_TRANSITION', 'right')
      },
      //详细页面跳转
      onClick(info){
        this.$store.commit('CHANGE_TRANSITION', 'left');
        let dataNames = ['bussinessInfo', 'customInfo', 'personInfo', 'backInfo', 'insuredPlan', 'approveTrace'];
        this.$router.push({
          path: info.path,
          query: {
            info: this.formInfo[dataNames[info.index]] ? this.formInfo[dataNames[info.index]] : []
          }
        });
        this.$store.commit('SAVE_MINUTED_INFO', {
          batchNo: this.batchNo,
          currentList: this.currentList,
          formInfo: this.formInfo
        })
      },
      //过滤
      filter(row){
        let index = null;
        if (row.state === "已通过") {
          index = "1"
        } else if (row.state === "处理中") {
          index = "0"
        } else {
          index = "2"
        }
        let className = "listStatus" + index;
        return className
      },
      //变更批次号
      changeBatchNo(){
        this.showPopup = true
      },
      //获取批次号
      getBatchNo(value){
        let time = new Date();
        let obj = {
          head: {
            tranDate: time.toLocaleDateString(),
            tranTime: time.toLocaleTimeString(),
            tranNo: Util.getUUid(),
            funcFlag: "mitMobile"
          },
          body: {
            batchNo: value,
            riskAssessNo: this.currentList.riskNo
          }
        };
        $.ajax("../ui/servlet/GCASServlet/queryBatchNo", {
          method: "post",
          contentType: "text/json;charset=UTF-8",
          data: JSON.stringify(obj),
          success: (info) => {
            let data = JSON.parse(info);
            if (data.head.flag === '0') {
              this.formInfo = data.body;
              this.vuxToast('批次信息已更新')
            } else {
              this.vuxToast(data.head.desc)
            }
          }
        });
        this.batchNo = value;
        this.showPopup = false
      }
    },
    mounted(){
      if (this.$route.query.info) {
        this.currentList = this.$route.query.list;
        this.formInfo = this.$route.query.info;
      }
      let minutedInfo = this.$store.state.app.minutedInfo;
      if (minutedInfo) {
        this.batchNo = minutedInfo.batchNo;
        this.formInfo = minutedInfo.formInfo;
        this.currentList = minutedInfo.currentList
      }
    }
  }
</script>
<style scoped>
  .listStatus0 {
    /*color: #00b5ad !important;*/
    border-top: 3px solid #00b5ad;
  }

  .listStatus1 {
    /*color: #19be6b !important;*/
    border-top: 3px solid #19be6b;
  }

  .listStatus2 {
    /*color: #ff9900 !important;*/
    border-top: 3px solid #ff9900;
  }

  .listStatus3 {
    /*color: #ed3f14 !important;*/
    border-top: 3px solid #ed3f14;
  }

  .listIcon {
    width: 35px;
    height: 35px;
  }
</style>
